<template>
  <header class="header">
    <div id="user-msg" class="mdui-chip" mdui-menu="{target: '#menu'}"> <!-- mdui-menu="{target: '#menu'}" -->
      <span class="mdui-chip-icon">{{ username.substring(0, 1) }}</span>
      <span class="mdui-chip-title">{{ username }}</span>
    </div>
    <!-- <button class="mdui-btn mdui-color-theme-accent"
          >
          open
    </button> -->
    <ul class="mdui-menu" id="menu" align="left">
      <li class="mdui-menu-item">
        <router-link to="/login" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons">account_circle</i>
          <!-- <i class="mdui-menu-item-icon mdui-icon material-icons">remove_red_eye</i> -->
          用户登录
        </router-link>
      </li>

      <li class="mdui-menu-item">
        <router-link to="/cloud" class="mdui-ripple">
          <i class="mdui-menu-item-icon mdui-icon material-icons">insert_drive_file</i>
          我的文件
        </router-link>
      </li>
      <li class="mdui-menu-item">
        <router-link to="/outlineDownload" class="mdui-ripple">
        <i class="mdui-menu-item-icon mdui-icon material-icons">file_download</i>
          离线下载
        </router-link>
      </li>
      <li class="mdui-divider"></li>
      <li class="mdui-menu-item">
        <a href="https://a.maorx.cn/" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>起始页
        </a>
      </li>

      <li class="mdui-menu-item">
        <a href="https://blog.farmer233.top/" class="mdui-ripple">
          <i class="mdui-menu-item-icon"></i>Farmer博客
        </a>
      </li>
    </ul>

  </header>
</template>

<script>
// import mdui from 'mdui'
export default {
  data () {
    return {
      username: 'Farmer'
    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style scoped>
.header {
  font-weight:100;
  width: 95vw;
  display: flex;
  flex-direction: row-reverse;
  align-content: flex-start;
  height: auto;
}
ul{
  border-radius: 5px;
}
#menu{
  font-size: 12px;
}
#user-msg{
  right: 0px;
}
</style>
